<style lang="less" scoped>
  @import "../../../styles/common.less";
</style>

<template>
  <div class="body-content">
    <Row>
      <Col span="24">
        <Card>
          <p slot="title">
            菜单列表
          </p>
          <Row class="margin-top-10">
            <Button type="ghost" @click="handleAdd(0)">新增</Button>
            <Button type="ghost" @click="init()">刷新</Button>
          </Row>
          <Row class="margin-top-10">
            <tree-grid
              :items="tableData"
              :columns="columnsList"
              @on-row-click="rowClick"
              @on-selection-change="selectionClick"
              @on-sort-change="sortClick"
            ></tree-grid>
          </Row>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>

import iView from 'iview'
import Vue from 'vue'
//  资源上请求内容
import dataApi from '@/api/system/menu.js'
import TreeGrid from '@/views/my-components/table/tree-grid2.0.vue'

Vue.use(iView)

export default {
  name: 'system-menu',
  data () {
    return {
      //  列表表头
      columnsList: [
        {
          type: 'selection',
          width: '50'
        },
        {
          title: '编号',
          width: 50,
          key: 'id',
          align: 'center',
          sortable: true
        },
        {
          title: '菜单名称',
          align: 'center',
          key: 'title'
        },
        {
          title: '路由名称',
          align: 'center',
          key: 'name'
        },
        {
          title: '菜单类型',
          align: 'center',
          key: 'menu_type_title'
        },
        {
          title: '菜单图标',
          align: 'center',
          key: 'icon'
        },
        {
          title: '是否开发者显示',
          align: 'center',
          key: 'is_developer'
        },
        {
          title: '描述',
          align: 'center',
          key: 'remark'
        },
        {
          title: '操作',
          type: 'action',
          width: '200',
          actions: [
            {
              name: 'add',
              type: 'primary',
              text: '添加',
              style: {
                margin: '0 5px'
              },
              size: 'default'
            }, {
              name: 'edit',
              type: 'primary',
              text: '编辑',
              style: {
                margin: '0 5px'
              },
              size: 'default'
            }, {
              name: 'delete',
              type: 'error',
              text: '删除',
              style: {
                margin: '0 5px'
              },
              size: 'default'
            }]
        }
      ],
      //  列表数据
      tableData: []
    }
  },
  components: {
    TreeGrid
  },
  methods: {
    // 新增
    handleAdd (pid) {
      this.$router.push({
        name: 'system-menu-edit',
        query: {pid: pid}
      })
    },
    // 编辑按钮点击触发
    handleEdit (id, pid) {
      this.$router.push({
        name: 'system-menu-edit',
        query: {id: id, pid: pid}
      })
    },
    handleDel (id) {
      dataApi.del(id).then(
        res => {
          this.$Message.success('删除数据成功')
          this.init()
        }
      )
    },
    rowClick (data, index, event, name, title) {
      switch (name) {
        case 'add':
          this.handleAdd(data.id)
          break
        case 'edit':
          this.handleEdit(data.id, data.pid)
          break
        case 'delete':
          this.handleDel(data.id)
          break
      }
    },
    selectionClick (arr) {
      console.log('选中数据id数组:' + arr)
    },
    sortClick (key, type) {
      console.log('排序字段:' + key)
      console.log('排序规则:' + type)
    },
    init () {
      let vm = this
      dataApi.list().then(
        res => {
          vm.tableData = res.data.list
        }
      )
    }
  },
  created () {
    this.init()
  },
  watch: {
    '$route' (to, from) {

    }
  }
}
</script>
